<template>
    <div class="app-mobile-select">
        <ion-icon v-if="curValue" name="close-circle-outline" @click="clear"></ion-icon>
        <ion-select  :value="curValue" :disabled="disabled ? disabled : false" @ionChange="change" interface="action-sheet" cancel-text="取消">
              <template v-for="option of options">
                <ion-select-option :key="option.value" :value="option.value">{{option.text}}</ion-select-option>
              </template>
        </ion-select>
    </div>   
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch
} from "vue-property-decorator";
import CodeListService from "@app-core/service/app/code-list-service";

@Component({
  components: {}
})
export default class AppSelect extends Vue {
    /**
     * 代码表服务对象
     *
     * @type {CodeListService}
     * @memberof AppSelect
     */

    public codeListService: CodeListService = new CodeListService();

    /**
     * 传入值
     *
     * @type {string}
     * @memberof AppSelect
     */
    @Prop() public value?: string;

    /**
     * 当前选中值
     * @memberof AppSelect
     */
    public curValue:any = this.value

    /**
     * change事件
     *
     * @memberof AppSelect
     */
    public change(value: any) {
        this.curValue = value.detail.value;
        this.$emit("change", value.detail.value);
    }

    /**
     * 下拉数据数组
     *
     * @type {any[]}
     * @memberof AppSelect
     */
    public options: any[] = [];

    /**
     * 是否禁用
     *
     * @type {string}
     * @memberof AppSelect
     */
    @Prop() public disabled?: string;

    /**
     * 代码表标识
     *
     * @type {string}
     * @memberof AppSelect
     */
    @Prop() public tag!: string;

    /**
     * 代码表类型
     *
     * @type {string}
     * @memberof AppSelect
     */
    @Prop() public type!: string;

    public created() {
      if (this.tag && this.type) {
        if (Object.is(this.type, "dynamic")) {
          this.codeListService
            .getItems(this.tag)
            .then((res: any) => {
              this.options = res;
            })
            .catch((error: any) => {
              this.options = [];
            });
        } else {
          this.options = this.$store.getters.getCodeListItems(this.tag);
        }
      }
    }

    /**
     * 清空值
     * @memberof AppSelect
     */
    public clear(){
        this.curValue = '';
        this.$emit('change','')
    }
}
</script>
<style lang="less">
@import './app-mobile-select.less';
</style>